<template>
  <a-spin :spinning="confirmLoading">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.biao-shi')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-input v-model="form.key" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.miao-shu')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-input v-model="form.title" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-miao-shu')"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.common.label.custom_SQL')" :labelCol="colLayout2.fixed.labelCol" :wrapperCol="colLayout2.fixed.wrapperCol">
            <ych-code-editor
              v-model="form.sql"
              language="sql"
              :fullScreen="true"
              :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-zi-ding-yi-sql')"
              style="min-height: 50px"/>
            <a-button-group>
              <a-button @click="selectTable">{{ $t('m.common.button.selectEntityTable') }}</a-button>
              <a-button @click="selectDbTable">{{ $t('m.common.button.selectDbTable') }}</a-button>
              <a-button @click="parseSql" type="primary">{{ $t('m.common.button.parseSql') }}</a-button>
              <a-dropdown>
                <a-menu slot="overlay" @click="onChangeQueryCol">
                  <a-menu-item :key="item.key" v-for="item in form.cols">
                    {{item.title}}
                  </a-menu-item>
                </a-menu>
                <a-button>{{ $t('m.eform.formDesign.label.tian-jia-cha-xun-zi-duan') }}
                  <ych-icon type="down"/>
                </a-button>
              </a-dropdown>
              <a-dropdown>
                <a-menu slot="overlay" @click="onChangeParentCol">
                  <a-menu-item :key="item.key" v-for="item in parentCols">
                    {{item.title}}
                  </a-menu-item>
                </a-menu>
                <a-button>{{ $t('m.eform.formDesign.label.tian-jia-cha-xun-zhi') }}
                  <ych-icon type="down"/>
                </a-button>
              </a-dropdown>
            </a-button-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.zhu-jian-zi-duan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-select
              v-model="form.keyName"
              :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-zhu-jian-zi-duan')"
              :options="form.cols"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.apptable.other.display_field')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-select
              v-model="form.titleName"
              :placeholder="$t('m.eform.apptable.placeholder.labelField')"
              :options="form.cols"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.wai-jian-zi-duan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-select
              v-model="form.parentKeyName"
              :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-wai-jian-zi-duan')"
              :options="form.cols"
              allowClear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.xun-huan-tiao-yong')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-checkbox :checked="form.cycle" @change="onChange">{{this.$t('m.common.label.yes')}}</a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.zhu-biao')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-input v-model="form.tableName" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-zhu-biao')"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item :label="$t('m.eform.formDesign.label.ke-fou-gou-xuan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-checkbox :checked="form.selection" @change="onChangeSelection">{{this.$t('m.common.label.yes')}}</a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="typeof form.level != 'undefined'">
          <a-form-item :label="$t('m.eform.formDesign.label.zi-dong-zhan-kai-ceng-ji')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
            <a-input-number v-model="form.level" :min="0" :max="3" :step="1" style="width:100%"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <select-table-dialog ref="selectTableDialog" @selectFinished="selectTableOk" :groupId="groupId"/>
    <select-db-table-dialog ref="selectDbTableDialog" @selectFinished="selectDbTableOk"/>
  </a-spin>
</template>

<script>

  import { getAction, postAction } from '@/api/manage'
  import SelectTableDialog from '../../select/dialog/SelectTableDialog'
  import SelectDbTableDialog from '../../select/dialog/SelectDbTableDialog'
  import YchConstant from "@/api/YchConstant";
  import { GardLayoutMixin } from '@/mixins/GardLayoutMixin'
  import {YchCodeEditor} from '@yuncheng/ych-components'

  export default {
    name: 'TreeNodeDetail',
    mixins: [GardLayoutMixin],
    components: {
      SelectTableDialog,
      SelectDbTableDialog,
      YchCodeEditor
    },
    props: {
      form: {
        type: Object,
        required: true
      },
      parentCols: {
        type: Array,
      },
      groupId: {
        type: String,
        required: true
      },
      model: {
        type: Object,
        required: false,
        default: () => {
        }
      },
    },
    data () {
      return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 4
        },
        wrapperCol2: {
          span: 20
        },
        confirmLoading: false,
        url: {
          getSelectSqlByTable: YchConstant.PREFIX_EFORM + '/engine/viewEngine/getSelectSqlByTable',
          parseSql: YchConstant.PREFIX_EFORM + '/engine/viewEngine/parseSql',
        }
      }
    },
    methods: {
      onChangeQueryCol (value) {
        let sql = this.form.sql
        if (!sql.endsWith(' ')) {
          sql = sql + ' '
        }
        sql = sql + value.key + ' = '
        this.form.sql = sql
      },
      onChangeParentCol (value) {
        let sql = this.form.sql
        if (!sql.endsWith(' ')) {
          sql = sql + ' '
        }
        sql = sql + '#{parameter.' + value.key + '}'
        this.form.sql = sql
      },
      onChange (e) {
        this.form.cycle = e.target.checked
      },
      onChangeSelection (e) {
        this.form.selection = e.target.checked
      },
      selectTable () {
        this.$refs.selectTableDialog.dsCode = this.model.dsCode
        this.$refs.selectTableDialog.radio = true
        this.$refs.selectTableDialog.visible = true
      },
      selectTableOk (selectedRowKeys, selectionRows) {
        this.confirmLoading = true
        this.model.dsCode = selectionRows[0].dsCode
        getAction(this.url.getSelectSqlByTable, {
          tableName: selectionRows[0].tableName
        }).then((res) => {
          if (res.success) {
            this.form.sql = res.result
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      selectDbTable () {
        this.$refs.selectDbTableDialog.queryParam.dsCode = this.model.dsCode
        this.$refs.selectDbTableDialog.radio = true
        this.$refs.selectDbTableDialog.visible = true
      },
      selectDbTableOk (selectedRowKeys, selectionRows) {
        this.model.dsCode = selectionRows[0].dsCode
        this.form.sql = 'select * from ' + selectionRows[0].tableName
      },
      parseSql () {
        const sql = this.form.sql
        if (!sql) {
          this.messageUtil.warning(this.$t('m.common.tip.sql_warn'))
          return
        }
        this.confirmLoading = true
        postAction(this.url.parseSql + '?dsCode=' + this.model.dsCode, {
          sql: sql
        }).then((res) => {
          if (res.success) {
            this.initTable(res.result)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      initTable (tables) {
        if (!tables) {
          this.messageUtil.warning(this.$t('m.common.tip.return_data_null'))
          return
        }
        const dataSource = []
        tables.forEach(table => {
          this.initColumn(table.columns, dataSource)
        })
        this.form.cols = [...dataSource]
        this.messageUtil.success(this.$t('m.common.tip.sql_ok'))
        if (tables.length > 0) {
          this.form.tableName = tables[0].tableName
        }
      },
      initColumn (columns, dataSource) {
        columns.forEach(column => {
          const data = {
            key: column.colAlias,
            title: column.colDesc || column.colAlias,
          }
          dataSource.push(data)
        })
      },
    },
  }
</script>
